<template>
<div style="width:400px;height:200px">
  <dv-scroll-board
    ref="datavTable"
    :config="configdisplacementofDam"
    style="width:100%;height:100%;"/>
    <div class="signBox">
      <el-button type="primary" :class="{'homeSign':sign == 'home'}" @click="add('home')">首页</el-button>
      <el-button type="primary" :class="{'sign':sign == 'site'}" @click="add('site')">站点全览</el-button>
      <el-button type="primary" :class="{'sign':sign == 'launcher'}" @click="add('launcher')">发射台全览</el-button>
    </div>
</div>
</template>

<script>
export default {
  name:'datav',
  data(){
    return {
      sign:'home',
      configdisplacementofDam: {
        data: [
        ], // 表数据
        header: ['名称', '经度', '纬度'], // 表头数据
        rowNum: 3, // 表行数
        // headerBGC: '#fff', // 表头背景色
        // oddRowBGC: '#fff', // 奇数行背景色
        // evenRowBGC: '#fff', // 偶数行背景色
        waitTime: 1000, // 轮播时间间隔(ms)
        align: ['center','center','center']
      }
    }
  },

  methods:{
    add(value){
      this.sign = value
    }
  },

  watch:{},
  computed:{},

  created(){},
  mounted(){
    let arr = [
             {
                "name": "全部站点",
                "lat": "44.0652",
                "lng": "87.41881"
            },
            {
                "name": "201台",
                "lat": "44.0652",
                "lng": "87.41881"
            },
            {
                "name": "202台",
                "lat": "29.663",
                "lng": "91.17845"
            },
            {
                "name": "203台",
                "lat": "40.85169",
                "lng": "111.75522"
            },
            {
                "name": "204台",
                "lat": "24.88968",
                "lng": "102.83915"
            },
            {
                "name": "205台",
                "lat": "28.25512",
                "lng": "113.08755"
            },
            {
                "name": "206台",
                "lat": "35.85189",
                "lng": "104.11898"
            },
            {
                "name": "207台",
                "lat": "36.45125",
                "lng": "120.59709"
            },
            {
                "name": "208台",
                "lat": "34.50605",
                "lng": "113.80432"
            },
            {
                "name": "209台",
                "lat": "31.38995",
                "lng": "121.37877"
            },
            {
                "name": "210台",
                "lat": "40.22927",
                "lng": "116.23761"
            },
            // {
            //     "name": "成都台",
            //     "lat": "30.69146",
            //     "lng": "103.86328"
            // },
            // {
            //     "name": "海南台",
            //     "lat": "20.05618",
            //     "lng": "110.20671"
            // },
            // {
            //     "name": "厦门台",
            //     "lat": "24.48935",
            //     "lng": "118.097"
            // },
            // {
            //     "name": "西安台",
            //     "lat": "34.16615",
            //     "lng": "108.91329"
            // },
            // {
            //     "name": "哈尔滨台",
            //     "lat": "45.58904",
            //     "lng": "126.53356"
            // }
        ]
    let arr1 = [
          {
            "name": "全部站点",
            "lat": "44.0652",
            "lng": "87.41881"
        },
        {
            "name": "201台",
            "lat": "44.0652",
            "lng": "87.41881"
        },
        {
            "name": "202台",
            "lat": "29.663",
            "lng": "91.17845"
        },
        {
            "name": "203台",
            "lat": "40.85169",
            "lng": "111.75522"
        },
        {
            "name": "204台",
            "lat": "24.88968",
            "lng": "102.83915"
        },
        {
            "name": "205台",
            "lat": "28.25512",
            "lng": "113.08755"
        },
        {
            "name": "206台",
            "lat": "35.85189",
            "lng": "104.11898"
        },
        {
            "name": "207台",
            "lat": "36.45125",
            "lng": "120.59709"
        },
        {
            "name": "208台",
            "lat": "34.50605",
            "lng": "113.80432"
        },
        {
            "name": "209台",
            "lat": "31.38995",
            "lng": "121.37877"
        },
        {
            "name": "210台",
            "lat": "40.22927",
            "lng": "116.23761"
        },
        {
            "name": "成都台",
            "lat": "30.69146",
            "lng": "103.86328"
        },
        {
            "name": "海南台",
            "lat": "20.05618",
            "lng": "110.20671"
        },
        {
            "name": "厦门台",
            "lat": "24.48935",
            "lng": "118.097"
        },
        {
            "name": "西安台",
            "lat": "34.16615",
            "lng": "108.91329"
        },
        {
            "name": "哈尔滨台",
            "lat": "45.58904",
            "lng": "126.53356"
        }
    ]
    // 模拟异步请求
    setTimeout(()=>{
      this.configdisplacementofDam.data = arr.map(item=>  [item.name,item.lat,item.lng])
      this.$refs['datavTable'].updateRows(this.configdisplacementofDam.data)

      setTimeout(()=>{
        let arr2 = arr1.map(item=>  [item.name,item.lat,item.lng]).filter(item=> this.configdisplacementofDam.data.every(item1=>item1[0] != item[0]) )
        this.configdisplacementofDam.data =  this.configdisplacementofDam.data.concat(arr2)
        // this.$refs['datavTable'].updateRows(this.configdisplacementofDam.data )
      },9000)

    },1000)


  },
  beforeDestroy(){}

}

</script>

<style scoped lang="less">
.signBox{
  background-color: black;
}

.signBox /deep/ .el-button{
  border: none;
  margin: 0;
  padding: 14px 28px;
  background: url('../assets/images/headerButton.png') no-repeat;
  background-size: 100% 100%;
}
/deep/.signBox>:nth-child(1){
  padding: 14px 42px;
  background: url('../assets/images/headerHomeButton.png') no-repeat;
  background-size: 100% 100%;
}
.signBox .sign{
  background: url('../assets/images/headerButtonActive.png') no-repeat;
  background-size: 100% 100%;
}
.signBox .homeSign{
  background: url('../assets/images/headerHomeButtonActive.png') no-repeat;
  background-size: 100% 100%;
}

.l-content {
  .dv-scroll-board{
    color:#3c3f52;
    .header{
      font-size: 1em;
      color: #91a0b9;
      text-align: center;
      white-space: nowrap;
    }
    .rows{
      .row-item{
        text-align: center;

        .ceil{
          color:#3c3f52;
          font-size: 1em;
          i{
            font-size: 0.5em;
            color: #3bc080;
            /*position: relative;
            left: 5px;
            top:10px;*/
          }
        }
        .ceil:nth-child(1){
          color: #7cb9ff;
          font-size: 1.1em;
          width: 25%;
        }
      }
    }
  }
}
</style>